﻿/// <reference path="../game/fourkill.util.js" />
/// <reference path="../input/fourkill.gpstests.input.gps.js" />
/// <reference path="../input/fourkill.gpstests.input.tap.js" />
/// <reference path="../input/fourkill.gpstests.input.orientation.js" />
/// <reference path="../painters/fourkill.painter.singletons.js" />
/// <reference path="../objects/fourkill.object.singletons.js" />
/// <reference path="../input/fourkill.input.singletons.js" />
/// <reference path="./fourkill.gpstests.input.gps.js" />
/// <reference path="http://maps.google.com/maps/api/js?sensor=false" />

var GpsTestsInputHandlers = {
    Gps: GpsTestsView_Gps.newInstance(),
    Orientation: GpsTestsView_Orientation.newInstance(),
    Tap: GpsTestsView_Tap.newInstance()
};

var GpsTestsView = Base.extend({
    initialize: function initialize(host) {
        this.host = host;
        this.paintingContext = null;
        this.inputs = [];
        this.paintInterval = null;
        this.frameRate = 500;
        this.framesUntilMapRefresh = 10;
        this.frameIndex = 10;
        this.viewId = "gps_testing";
        this.isActive = false;
        this.tapX = 0;
        this.tapY = 0;
        this.lastLatitude = 0;
        this.lastLongitude = 0;
        this.map = null;
        this.marker = null;
        this.$mapDiv = null;
        this.mapInitialized = false;
        this.tapOrientations = [];
    },
    setup: function setup() {
        if (GlobalInputHandlers.Gps.isAvailable()) GlobalInputHandlers.Gps.setup();
        if (GlobalInputHandlers.Orientation.isAvailable()) GlobalInputHandlers.Orientation.setup();
        if (GlobalInputHandlers.Tap.isAvailable()) GlobalInputHandlers.Tap.setup();
        /*<div id="map" style="width: 400px; height: 300px"></div>*/
        var $map = $('<div/>', { 'id': 'map' })
           .offset({ top: 100, left: 200 })
           .css("width", $(window).width() - 220+"px")
           .css("height", $(window).height() - 120 + "px")
           .css("position", "absolute")
           .css("background-color", "lightGray")
           .css("border", "1px solid black")
           .css("zIndex", "1");
        $(document.body).append($map);

        var $canvas = $('<canvas/>', { 'class': 'radHuh', 'id': 'canvas' })
           .attr("width", $(window).width())
           .attr("height", $(window).height())
           .offset({ top: 0, left: 0 })
           .css("position", "absolute")
           .css("zIndex", "0");
        $(document.body).append($canvas);
        
        this.paintingContext = $canvas.get(0).getContext("2d");
        this.inputData = { latitude: 0, longitude: 0, alpha: 0, beta: 0, gamma: 0, absolute: 0, x:0, y:0, tapped:false };
        this.$mapDiv = $("#map");

        this.inputs.push(GpsTestsInputHandlers.Gps);
        this.inputs.push(GpsTestsInputHandlers.Orientation);
        this.inputs.push(GpsTestsInputHandlers.Tap);

        for (var k = 0; k < this.inputs.length; k++) {
            if (this.inputs[k].isAvailable()) {
                this.inputs[k].enable();
            }
        }

        this.paintInterval = setInterval((function (self) { return function () { self.paint(); } })(this), this.frameRate);
        this.isActive = true;
    },
    teardown: function teardown() {
        for (var k = 0; k < this.inputs.length; k++) {
            if (this.inputs[k].enabled) {
                this.inputs[k].disable();
            }
        }
        $(this.paintingContext.canvas).remove();
        this.$mapDiv.remove()
        this.paintingContext = null;
        this.inputs.length = 0;
        if (this.paintInterval != null) {
            clearInterval(this.paintInterval);
            this.paintInterval = null;
        }
        this.isActive = false;
    },
    pause: function pause() {
        for (var k = 0; k < this.inputs.length; k++) {
            if (this.inputs[k].enabled) {
                this.inputs[k].disable();
            }
        }
        if (this.paintInterval != null) {
            clearInterval(this.paintInterval);
            this.paintInterval = null;
        }
    },
    resume: function resume() {
        for (var k = 0; k < this.inputs.length; k++) {
            if (!this.inputs[k].enabled) {
                this.inputs[k].enable();
            }
        }
        if (this.paintInterval == null) {
            this.paintInterval = setInterval((function (self) { return function () { self.paint(); } })(this), this.frameRate);
        }
    },
    resize: function resize() {
        if (this.isActive) {
            var pc = this.paintingContext;
            pc.canvas.height = $(window).height();
            pc.canvas.width = $(window).width();
            
            this.$mapDiv.css("width", $(window).width() - 220 + "px")
                .css("height", $(window).height() - 120 + "px");

            this.paint();
        }
    },
    paint: function paint() {
        var pc = this.paintingContext,
            inp = this.inputData;

        for (var k = 0; k < this.inputs.length; k++) {
            if (this.inputs[k].enabled) {
                this.inputs[k].update(inp);
            }
        }
        if (this.frameIndex > this.framesUntilMapRefresh) {
            this.frameIndex = 0;
            if (inp.latitude != 0) {
                if ((this.lastLatitude != inp.latitude) || (this.lastLongitude != inp.longitude)) {
                    this.lastLatitude = inp.latitude;
                    this.lastLongitude = inp.longitude;
                    var ll = new google.maps.LatLng(inp.latitude, inp.longitude);
                    if (!this.mapInitialized && inp.latitude != 0 && this.map == null) {
                        this.mapInitialized = true;

                        var myOptions = {
                            zoom: 16,
                            center: ll,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };

                        this.map = new google.maps.Map(document.getElementById("map"), myOptions);

                        this.marker = new google.maps.Marker({
                            position: ll,
                            title: "You (" + new Date() + ")"
                        });

                        this.marker.setMap(this.map);
                    }
                    else if (this.map != null) {
                        this.marker.setPosition(ll);
                        this.map.panTo(ll);
                    }
                }
            }
        }

        pc.clearRect(0, 0, pc.canvas.width, pc.canvas.height);

        if (inp.tapped) {
            this.tapX = inp.x;
            this.tapY = inp.y;
            this.tapOrientations.push({ alpha:inp.alpha, beta:inp.beta, gamma:inp.gamma });
        }

        pc.fillText("LATITUDE: " + inp.latitude + ", LONGITUDE: " + inp.longitude + " (" + GpsTestsInputHandlers.Gps.updateCount + " updates)", 10, 10);
        pc.fillText("ALPHA: " + inp.alpha + ", BETA: " + inp.beta + ", GAMMA: " + inp.gamma + ", ABSOLUTE: " + inp.absolute + " (" + GpsTestsInputHandlers.Orientation.updateCount + " updates)", 10, 20);
        pc.fillText("USER AGENT: " + navigator.userAgent, 10, 30);
        pc.fillText("LAST TAP: (" + this.tapX + "," + this.tapY + ")", 10, 40);
        for (var i = 0; i < this.tapOrientations.length; i++) {
            var o = this.tapOrientations[i];
            pc.fillText("TAP " + i.toString() + " ORIENTATION: (" + o.alpha + ", " + o.beta + ", " + o.gamma + ")", 10, 50 + (i * 10));

        }
        
        this.frameIndex++;
    }
});
/*<!DOCTYPE html>
<html> 
<head>
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body>
   <div id="map" style="width: 400px; height: 300px"></div> 

   <script type="text/javascript"> 
      var myOptions = {
         zoom: 8,
         center: new google.maps.LatLng(51.49, -0.12),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById("map"), myOptions);
   </script> 
</body> 
</html>*/